00<template>
  <ContentBox has-corner class="community-reconstruction">
    <ContentBoxTitle title="老旧小区改造" />
    <div class="community-reconstruction__content">
      <ReconstructionItem :data="tu" class="tu" />
      <ReconstructionItem :data="base" class="base" />
      <ReconstructionItem :data="ruo" class="ruo" />
      <ReconstructionItem :data="house" class="house" />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import ReconstructionItem from './ReconstructionItem.vue'
export default {
  name: 'CommunityReconstruction',
  components: {
    ContentBox,
    ContentBoxTitle,
    ReconstructionItem
  },
  data () {
    return {
      tu: {
        categoryValue: '15',
        categoryText: '土建改造',
        details: [{
          value: 5,
          text: '待改造数量'
        }, {
          value: '3',
          text: '改造中数量'
        }]
      },
      base: {
        categoryValue: '20',
        categoryText: '基础设施改造',
        details: [{
          value: 3,
          text: '待改造数量'
        }, {
          value: '1',
          text: '改造中数量'
        }]
      },
      ruo: {
        categoryValue: '30',
        categoryText: '弱电改造',
        details: [{
          value: 5,
          text: '待改造数量'
        }, {
          value: '8',
          text: '改造中数量'
        }]
      },
      house: {
        categoryValue: '40',
        categoryText: '房屋漏水改造',
        details: [{
          value: 8,
          text: '待改造数量'
        }, {
          value: '3',
          text: '改造中数量'
        }]
      }
    }
  }
}
</script>

<style lang="scss">
.community-reconstruction {
  width: $base * 820px;
  height: $base * 230px;

  .content-box-title__content {
    width: $base * 300px;
  }

  .community-reconstruction__content {
    display: flex;
    padding-top: $base * 17px;
  }

  .tu,
  .base,
  .ruo,
  .house {
    flex: 1;
    .reconstruction-item__category {
      .value-text__value__value {
        color: $txt_c1;
      }
    }

    .reconstruction-item__detail__1 {
      .value-text__value__value {
        color: $txt_c2;
      }
    }

    .reconstruction-item__detail__2 {
      .value-text__value__value {
        color: $txt_c1;
      }
    }
  }

  .base {
    .reconstruction-item__category {
      .value-text__value__value {
        color: $value_c;
      }
    }
  }

  .ruo {
    .reconstruction-item__category {
      .value-text__value__value {
        color: $txt_c2;
      }
    }
  }

  .house {
    .reconstruction-item__category {
      .value-text__value__value {
        color: $txt_c3;
      }
    }
  }
}
</style>